import { CategoryModelState } from '@/models/category';
import { useEffect } from 'react';
import { Link, useDispatch, useIntl, useSelector } from 'umi';
import styles from './index.less'

export default function Rightlower() {
  const { category } = useSelector((state: { category: CategoryModelState }) => state.category);

  const dispatch = useDispatch();
  const intl= useIntl()
  useEffect(() => {
    dispatch({
      type: 'categoryPagereadlist/getcategoryPagetitle',
    });
  }, []);
  return(
    <div className={styles.rightLower}>
        <div className={styles.rightLowerTitle}>
          <span>{intl.formatMessage({id:'tagTitle'})}</span>
          <span></span>
        </div>
        <ul>
          {
            category&&category.map(item=>{
              return <li key={item.id}>
                <Link to={`/category/${item.value}`}>
                 {item.label}
                 <span>
                   {intl.formatMessage({id:'total'})}
                           {item.articleCount}        
                   {intl.formatMessage({id:'piece'})}
                  </span>
                </Link>
              </li>
            })
          }
        </ul>
      {/* <div className={styles.right}>
        
      </div> */}
    </div>
  );
}
